<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas{
            border: 1px solid #000000;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="400px">

</canvas>
</body>
<script>
    let canvas = document.getElementById('canvas')
    let context = canvas.getContext('2d')

    //保存状态1 (坐标为0,0)
    context.save()

    context.translate(canvas.width/2,canvas.height/2)
    context.save()//保存状态2，坐标为中心

    context.rotate(0.25*Math.PI)
    context.save()//保存状态3 旋转45°

    context.scale(2,1)
    context.save()//保存状态4 宽放大2倍

    //绘制第一个图形 状态包括 1 2 3 4 (中心坐标 旋转，缩放)
    context.fillStyle = "#f00"
    context.fillRect(0,0,100,100)

    //绘制第二个图形
    context.restore()//恢复 状态包括 1 2（中心坐标 旋转 缩放）
    context.fillStyle = "#f0f"
    context.fillRect(0,0,80,80)

    //绘制第三个图形
    context.restore()//恢复 状态包括 1 2（中心坐标 旋转）
    context.fillStyle = "#00f"
    context.fillRect(0,0,60,60)

    //绘制第三个图形
    context.restore()//恢复 状态包括 1（中心坐标）
    context.fillStyle = "#ff3"
    context.fillRect(0,0,40,40)

    //绘制第四个图形
    context.restore()//恢复
    context.fillStyle = "#3f3"
    context.fillRect(0,0,40,40)
</script>
</html>